<template>
    <ul class="data-list-container">
        <li v-for="item in props.list" :key="item.id">
            <Avatar :url="item.avatar as string" :size="44"/>
            <div class="data">
                <div class="nickName">{{ item.nickName }}</div>
                <div class="content">{{item.content}}</div>
                <div class="time">{{ formatDate(item.createDate as any,true) }}</div>
            </div>
        </li>
    </ul>
</template>
<script setup lang='ts'>
import { PropType } from 'vue';
import { TypeApiCommentI } from '~@/api/apiTypes';
import Avatar from '~@/components/Avatar/index.vue'
import { formatDate } from '~@/untils/NslUtils';
    //#region defineXxx
    defineOptions({
        name:'DataList11'
    });

    const props=defineProps({
        list:{
            type:Array as PropType<TypeApiCommentI[]>,
            required:true
        },
    });

    const emit = defineEmits<{
        event1:[para1:number,para2:string],
        event2:[para1:number,para2:string],
    }>();
    //#endregion
  
    
</script>
<style lang='less' scoped>
.data-list-container{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    display: flex;
    border-bottom: 1px solid lighten(@gray,20%);
    padding: 15px 0;
}
.avatar-container{
    margin-right: 15px;
}
.data{
    flex: 1 1 auto;
    position: relative;
    .nickName{
    color:darken(@success,10%);
    margin-bottom: 10px;
    }
    .content{
        font-size: 14px;
    }
    .time{
        // position: absolute;
        // right: 0;
        // top:5px;
        margin-top: 15px;
        font-size: 12px;
        color:@gray
    }

}


</style>